<template>
  <div>
    <div class="bookimg" v-lazy:background-image="$store.state.imgPath+CPNimgurl"></div>
    <div class="bookname"><slot name="name"></slot></div>
    <star :grade="CPNgrade" :showGrade="true"></star>
  </div>
</template>

<script>
import Star from '@/components/Star.vue'
export default {
  components:{
    Star
  },
  data(){
    return {
    }
  },
  props:{
    CPNimgurl:String,
    CPNgrade:{
      type:[Number,String],
      default:0
    }
  }
}
</script>

<style>
.bookimg{
  width: 100%;
  height: 140px;
  border-radius: 4px;
  background-color: #ddd;
  background-size: 100% 100%;
}
.bookname{
  font-weight: 700;
  font-size: 13px;
  margin-top: 4px;
  line-height: 23px;
  color: black;
}

</style>